<template>
    <div class="demo">
      <el-switch
          inline-prompt
          v-model="theme"
          style="--el-switch-on-color: #dcdcdc;--el-switch-off-color: #525457"
          :active-action-icon="sunny"
          :inactive-action-icon="moon"
          @click="toggle()"
      >
      </el-switch>
    </div>
  </template>
   
  <script setup lang="ts">
  import emit from '@/util/emit';
  import { useToggle } from '@vueuse/shared'
  import { useDark } from "@vueuse/core";
  import { ref ,watch} from 'vue';
  import sunny from '@/components/Icon/Sunny.vue'
  import moon from '@/components/Icon/Moon.vue'
      const theme = ref<boolean>(false)
      const isDark = useDark({
        // 存储到localStorage/sessionStorage中的Key 根据自己的需求更改
        storageKey: 'useDarkKEY',
        // 暗黑class名字
        valueDark: 'dark',
        // 高亮class名字
        valueLight: 'light',
      })


      const toggle = useToggle(isDark);
      watch(theme,(newX)=>{

      emit.emit('IsDark',theme.value)

// console.info((themes as any)[newY])

})


   
   
      
  </script>
   
  <style>
  .demo {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  </style>